<template>
  <div>
    <div class="row-header">
      <el-form ref="form" :model="form" label-width="100px" :inline="$store.state.app.screenWidth<992?false:true" >
        <el-form-item label="卡密状态" prop="status">
          <el-select v-model="form.status">
            <el-option value="" label='请选择'></el-option>
            <el-option value="BE_USED" label="已使用"></el-option>
            <el-option value="NOT_USE" label="未使用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否已废弃" prop="dictIsUnable">
          <el-select v-model="form.dictIsUnable">
            <el-option value="" label='请选择'></el-option>
            <el-option value="C_YES" label="已废弃"></el-option>
            <el-option value="C_NO" label="未废弃"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="到期时间" prop="time">
          <el-date-picker
            v-model="form.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="创建时间" prop="date">
          <el-date-picker
            v-model="form.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="small" icon="el-icon-search" @click="current=1,initData()">查询</el-button>
        <el-button type="shenda" size="small" icon="el-icon-refresh-right" @click="resetForm('form')">重置</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-button type="shenda" size="small" icon="el-icon-back" @click="toBack">返回</el-button>
      <el-button type="shenda" size="small" icon="el-icon-refresh" @click="current=1,initData()">刷新数据</el-button>
      <el-button type="shenda" size="small" icon="el-icon-download" @click="downLoadData">数据导出</el-button>
      <el-button type="shenda" size="small" icon="el-icon-edit-outline" @click="editeRecordDialog=true">启用/废弃全部卡密</el-button>
<!--      <el-button type="shendaSuccess" size="small" icon="el-icon-view" @click="reviewAllData" :disabled="showAllBtn&&name" v-if="name">切换全部卡密</el-button>-->
<!--      <el-button type="shendaWarning" size="small" icon="el-icon-tickets" @click="reviewSectionData" :disabled="!showAllBtn&&name" v-if="name">查看[ {{name}} ]卡密</el-button>-->
      <el-button type="shendaSuccess" size="small" icon="el-icon-view" @click="reviewSectionData" v-show="name&&showAllBtn">切换全部卡密</el-button>
      <el-button type="shendaWarning" size="small" icon="el-icon-tickets" @click="reviewAllData" v-show="name&&!showAllBtn">查看[ {{name}} ]卡密</el-button>
      <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
                :data="tableData" class="row-main-table"
                ref="table" tooltip-effect="dark"
                v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)"
      >
        <el-table-column prop="secretStr" label="卡密字符串" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'" :fixed="$store.state.app.screenWidth<992?true:false" ></el-table-column>
        <el-table-column prop="dictStatusName" label="卡密状态" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="dictIsUnable" label="是否已废弃" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'">
          <template slot-scope="scope">
            <span v-if="scope.row.dictIsUnable=='C_YES'">已废弃</span>
            <span v-if="scope.row.dictIsUnable=='C_NO'">未废弃</span>
            <span v-if="scope.row.dictIsUnable==''">--</span>
          </template>
        </el-table-column>
        <el-table-column prop="setMealName" label="套餐小类" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="endTimeDate" label="到期时间" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="insertTimeDate" label="创建日期" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
      </el-table>
      <div :style="{'overflow':$store.state.app.screenWidth<992?'scroll':'auto'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="row-main-pager"
          :current-page.sync="current"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          background></el-pagination>
      </div>
    </div>
    <!--  启用 or 废弃卡密  -->
    <el-dialog title="启用/废弃卡密" top="33vh" :visible.sync="editeRecordDialog" :width="$store.state.app.screenWidth<600?'100%':'600px'" center>
      <el-form :model="editeForm" ref="editeForm" >
        <el-form-item label="启用或废弃卡密" prop="flag">
          <el-radio-group v-model="editeForm.status" @change="changeFlag">
            <el-radio-button label="C_YES">废弃</el-radio-button>
            <el-radio-button label="C_NO">启用</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
        <el-button @click="editeRecordDialog = false" size="small">关 闭</el-button>
        <el-button @click="update" type="primary" size="small" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {allExchangeFlowList,exchangeFlowDownload,exchangeFlowEdite,exchangeFlowSearch} from '@/api/getData'
export default {
  name: "",
  data() {
    return {
      id: '',
      current: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      tableLoading: false,
      form: {
        status: '',
        time: '',
        date: '',
        dictIsUnable: '',
      },
      editeRecordDialog: false,
      editeForm: {
        status: '',
      },
      name: '',
      showAllBtn: false,
      loading: false,
    }
  },
  mounted() {
    this.id = this.$route.query.id?this.$route.query.id:'';
    this.name = this.$route.query.name?this.$route.query.name:'';
    this.initData();
  },
  methods: {
    changeFlag() {
      let time1 = '';
      let time2 = '';
      let date1 = '';
      let date2 = '';
      if (this.form.time.length > 0) {
        time1 = this.form.time[0];
        time2 = this.form.time[1];
      }
      if (this.form.date.length > 0) {
        date1 = this.form.date[0];
        date2 = this.form.date[1];
      }
      let tip = this.editeForm.status=='C_YES'?'废弃':'启用';
      exchangeFlowSearch({
        headId: this.id,
        status: this.form.status,
        beginEndTime: time1,
        endEndTime: time2,
        beginInsertTime: date1,
        endInsertTime: date2,
        dictIsUnable: this.editeForm.status,
      }).then(res => {
        if (res.code == 10000) {
          if(res.data==0){
            this.$alert(`当前暂无可执行${tip}的数据，点击确定关闭弹窗`, '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.editeRecordDialog = false;
              }
            });
          }
          else{
            this.$confirm(`是否对当前${res.data}条数据继续执行${tip}卡密?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.loading = true;
              this.update()
            }).catch(() => {

            });
          }
        }
      })
    },
    downLoadData(){
      let time1 = '';
      let time2 = '';
      let date1 = '';
      let date2 = '';
      if (this.form.time.length > 0) {
        time1 = this.form.time[0];
        time2 = this.form.time[1];
      }
      if (this.form.date.length > 0) {
        date1 = this.form.date[0];
        date2 = this.form.date[1];
      }
      let url = `/api/batch-job-center/secret/exportExceclForSecret/white?headId=${this.id}&dictStatus=${this.form.status}&beginEndTime=${time1}&beginInsertTime=${date1}&endInsertTime=${date2}&dictIsUnable=${this.form.dictIsUnable}`;
      window.open(url, '_blank');
      // exchangeFlowDownload({
      //   headId: this.id,
      //   dictStatus: this.form.status,
      //   beginEndTime: time1,
      //   endEndTime: time2,
      //   beginInsertTime: date1,
      //   endInsertTime: date2,
      //   dictIsUnable: this.form.dictIsUnable,
      // }).then(res=>{
      //   let href = res.data;
      //   window.open(href, '_blank');
      // })
    },
    async initData(){
      this.tableLoading = true;
      let time1 = '';
      let time2 = '';
      let date1 = '';
      let date2 = '';
      if (this.form.time.length > 0) {
        time1 = this.form.time[0];
        time2 = this.form.time[1];
      }
      if (this.form.date.length > 0) {
        date1 = this.form.date[0];
        date2 = this.form.date[1];
      }
      let id = this.showAllBtn?'':this.id;
      let returnData = await allExchangeFlowList({
        headId: id,
        dictStatus: this.form.status,
        beginEndTime: time1,
        endEndTime: time2,
        beginInsertTime: date1,
        endInsertTime: date2,
        dictIsUnable: this.form.dictIsUnable,
        page: {
          current: this.current.toString(),
          size: this.pageSize.toString()
        }
      })
      this.tableData = [];
      this.total = 0;
      if(returnData.code==10000){
        returnData.data.records.map(item=>{
          this.tableData.push(item);
        })
        this.total = returnData.data.total;
      }
      this.tableLoading = false;
    },
    reviewAllData(){
      this.showAllBtn = true;
      this.initData()
    },
    reviewSectionData(){
      this.showAllBtn = false;
      this.initData()
    },
    handleSizeChange(val){
      this.pageSize = val;
      this.current = 1;
      this.initData();
    },
    handleCurrentChange(val){
      this.current = val;
      this.initData();
    },
    toBack() {
      this.$router.back(-1);
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
    },
    update(){
      if(!this.editeForm.status){
        this.$message.error('请选择卡密是否废弃')
        return false
      }
      let time1 = '';
      let time2 = '';
      let date1 = '';
      let date2 = '';
      if (this.form.time.length > 0) {
        time1 = this.form.time[0];
        time2 = this.form.time[1];
      }
      if (this.form.date.length > 0) {
        date1 = this.form.date[0];
        date2 = this.form.date[1];
      }
      exchangeFlowEdite({
        headId: this.id,
        status: this.form.status,
        beginEndTime: time1,
        endEndTime: time2,
        beginInsertTime: date1,
        endInsertTime: date2,
        dictIsUnableForActive: this.editeForm.status
      }).then(res => {
        this.loading = false;
        let text = res.data == 0 ? '所有数据操作成功' : '当前' + res.data + '失败条数据'
        this.$alert(text, '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.editeRecordDialog = false;
            this.editeForm.status = '';
            this.initData();
          }
        });
      })
    }
  }
}
</script>

<style scoped>

</style>
